<template>
  <view class="page_content" style="position: relative">
    <view style="padding: 0 20rpx;background-color: white;display: flex;align-items: center;justify-content: center;;height: 88rpx;font-size: 26rpx;position: sticky;top: 0;right: 0;width: 750rpx;z-index: 999">
      <view class="u-flex" style="flex: 1;justify-content: center" @click="selectDate(1)">
        开始：<view style="color: #999999;width: 168rpx;background-color: #F6F6F6;padding: 10rpx 0 10rpx 16rpx;border-radius: 10rpx">{{start_time?start_time:'请选择日期'}}</view>
      </view>
      <view class="u-flex" style="flex: 1;justify-content: center"  @click="selectDate(2)">
        结束：<view style="color: #999999;width: 168rpx;background-color: #F6F6F6;padding: 10rpx 0 10rpx 16rpx;border-radius: 10rpx">{{ end_time ? end_time : '请选择日期'}}</view>
      </view>
      <view style="margin-left: 10rpx;padding: 6rpx 0;width: 108rpx;text-align: center;border-radius: 38rpx;border: 1rpx solid #e2e2e2;" @click="getShopList()">确定</view>
    </view>
    <u-picker mode="time" v-model="show" :params="params" :default-time="getDate()" safe-area-inset-bottom start-year="2025" end-year="2030" @confirm="confirmTime"></u-picker>
    <home-orderlist ref="" :orderList="shopsLists"></home-orderlist>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      pageSize: 1,
      orderStatus: '',
      shopsLists: [],
      show: false,
      defaultTime: "",
      params: {
        year: true,
        month: true,
        day: true,
      },
      start_time: "",
      end_time: "",
      type: 1,
    }
  },
  onLoad() {
    let that = this
    let token = uni.getStorageSync('token')
    if (!token) {

    } else {
      that.GetUserInfo()
      that.GetOrderList()
    }
    that.getDate()
  },
  //下拉刷新
  onPullDownRefresh() {
    let that = this
    that.shopsLists = []
    that.pageSize = 1
    setTimeout(function () {
      that.GetOrderList()
      uni.stopPullDownRefresh();
    }, 1500);
  },
  //触底加载
  onReachBottom() {
    let that = this
    setTimeout(function () {
      that.pageSize++;
      that.GetOrderList()
      uni.hideNavigationBarLoading()
    }, 500);
  },
  methods: {
    getShopList() {
      if((this.start_time == "") || (this.end_time == "")){
        uni.showToast({
          title: '请选择开始时间和结束时间',
          icon: 'none'
        })
        return
      }
      uni.startPullDownRefresh();
    },
    selectDate(type) {
      this.show = true
      this.type = type
    },
    confirmTime(e){
      if(this.type == 1){
        this.start_time =e.year + '-' +e.month + '-' +e.day
      }else{
        this.end_time =e.year + '-' +e.month + '-' +e.day
      }

    },
    getDate() {
      const now = new Date();
      // console.log(now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate())
      return now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate()
    },
    GetOrderList() {
      if((this.start_time == "" && this.end_time) || (this.start_time && this.end_time == "")){
        uni.showToast({
          title: '请选择开始时间和结束时间',
          icon: 'none'
        })
        return
      }
      let that = this
      that.$u.post('/shop/order/lists', {
        page: that.pageSize, //分页页码，数字类型
        limit: 10, //每页条数 默认10
        shop_id: '', //店铺ID
        status: that.orderStatus, //订单状态 默认全部 不传 3已核验（核验明细）， 4查看笔记
        start_date: that.start_time, //开始时间
        end_date: that.end_time, //结束时间
      }).then(res => {
        console.log('订单列表', res);
        if (that.pageSize != 1) {
          if (res.result.length != 0) {
            that.shopsLists = that.shopsLists.concat(res.result)
          } else {

          }
        } else {
          that.shopsLists = res.result
        }
      }).catch(err => {

      });
    },
    GetUserInfo() {
      let that = this
      that.$u.post('/shop/user/info', {}).then(res => {
        console.log('账号信息', res)
        uni.setStorageSync('userinfo', res.result)
      }).catch(err => {

      });
    },


  }
}
</script>

<style lang="scss">
page {
}

/* /deep/ */
.jianbian {
  background-image: linear-gradient(to top, #F4F4F4, #F4F4F4) !important;
}

.top_wrap {
  position: relative;
  padding: 200rpx 0 0 0;
  overflow: hidden;

  .topbg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
  }

  .top_info {
    position: relative;
    z-index: 2;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.62);
    padding: 14rpx 24rpx;
    border-radius: 200rpx;
    width: 92%;
    margin: 0 auto;

    .allshop {
      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }

    .allshopright {
    }
  }

  .san_btn_wrap {
    padding: 68rpx 100rpx;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;

    .san_btn_item {
      text-align: center;

      image {
        width: 90rpx;
        height: 90rpx;
        background-color: #fff;
        border-radius: 14rpx;
        padding: 10rpx;
      }

      view {
        margin-top: 12rpx;
        font-weight: 500;
      }
    }
  }

  .tabbas_box {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 30rpx 30rpx 0 0;
    padding: 20rpx 0 0 0;

    .hkbox {
      width: 60%;
      margin: 0 auto;
      text-align: center;
    }
  }
}

.nav_bar {
  padding: 30rpx;

  .address {
    font-weight: bold;
    font-size: 36rpx;
    color: #333333;
  }
}
</style>